<template>
  <div class="input01">
    <label v-if="title!==''" style="text-align:right;">
      <span style="color:red" v-show="req">*</span>
      {{title}}：
    </label>
    <el-input
      class="input01-input"
      :style="{width:width}"
      @change="onchange"
      @blur="onBlur"
      :placeholder="placeholder"
      v-model="val"
      :type="type"
      :disabled="disabled"
      clearable
    >
      <!-- <i slot="suffix" v-bind:class="[icon, 'el-input__icon']"></i> -->
    </el-input>
  </div>
</template>
<style scoped>
.input01 {
  margin: 5px 0px;
}

.input01-input {
  /* width: auto!important; */
  width: 200px;
}

.input01 i {
  font-size: 18px;
}

.input01 >>> .el-input__inner {
  background: #ffffff;
  /* height: 32px!important; */
  /* text-align: center; */
  width: 100% !important;
}

.input01 >>> .el-input__inner {
  height: 32px !important;
}

.input01 >>> .el-input__icon {
  line-height: 32px !important;
}
</style>
<script>
export default {
  name: "input01",
  props: {
    title: {
      default: "",
    },
    icon: {
      default: "",
    },
    value: {
      default: "",
    },
    type: {
      default: "",
    },
    width: {
      type: String,
      default: "200px",
    },
    req: {
      default: false,
    },
    placeholder: {
      default: "请输入",
    },
    disabled: {
      default: false,
    },
  },
  meta: {
    descr: "普通输入框",
  },
  data() {
    return {
      val: "",
    };
  },
  methods: {
    onchange(d) {
      this.$emit("input", d);
    },
    onBlur(d) {
      this.$emit("blur", d);
    },
  },
  created() {
    this.val = this.value;
  },
  watch: {
    val(value) {
      this.$emit("input", value);
    },
    value() {
      this.val = this.value;
    },
  },
};
</script>